<script setup lang="ts">
import btn from "@/utils/buttonInterface";
import { ElMessage } from "element-plus";
import { Bell, CircleCloseFilled } from "@element-plus/icons-vue";

// 常量
const tag = "单位纹理查看";
const winStoreKey = "EntTextureWinStore";

// ref
// 表示SkewXCard是否展开
const hCardOpen = ref<boolean>(false);
const constOpen = ref<boolean>(false);
const refreshLoading = ref<boolean>(false);

async function testPrettyBtn() {
  refreshLoading.value = true;
  try {
    let temp = await btn.ent.refreshEntCache();
    if (temp == 1) {
      ElMessage({
        showClose: true,
        message: "缓存刷新成功！！",
        type: "success",
        icon: Bell,
        duration: 3000,
      });
    } else {
      ElMessage({
        showClose: true,
        message: "缓存更新报错！！",
        type: "error",
        icon: CircleCloseFilled,
        duration: 3000,
      });
    }
    refreshLoading.value = false;
  } catch (error) {
    refreshLoading.value = false;
    ElMessage({
      showClose: true,
      message: "缓存更新报错！！",
      type: "error",
      icon: CircleCloseFilled,
      duration: 3000,
    });
  }
}

function open() {
  hCardOpen.value = true;
  if (!constOpen.value) {
    constOpen.value = true;
  }
}
function close() {
  hCardOpen.value = false;
}
</script>

<template>
  <MainPage>
    <template v-slot:headerTitle>
      <Lv1stTitle :title="tag"></Lv1stTitle>
      <PrettyBtn
        style="margin-left: auto"
        :loading="refreshLoading"
        :on-click="testPrettyBtn"
        :btn-name="'刷新缓存'"
      ></PrettyBtn>
    </template>
    <template v-slot:decoration>
      <TopBar :Tag="'纹理查看Console'" />
    </template>
    <template v-slot:contents>
      <ContentsNoInput>
        <template v-slot:main>
          <div class="testContainer1">
            <div class="testContainer2">
              <div class="testContainer3">
                <SrchEntTCard
                  :forceOpen="constOpen"
                  @isCardOpen="open"
                  @isCardClose="close"
                />
              </div>
              <div class="testContainer4">
                <div class="testContainer5">
                  <WaterLayout>
                    <CtlCard :open-flag="false" />
                  </WaterLayout>
                </div>
              </div>
            </div>
          </div>
        </template>
      </ContentsNoInput>
    </template>
  </MainPage>
</template>

<style scoped>
.testContainer1 {
  display: flex;
  position: relative;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;
  overflow-x: auto; /* 允许水平滚动 */
  overflow-y: hidden; /* 防止垂直滚动 */
}

.testContainer1 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.testContainer2 {
  position: relative;
  display: flex;
  width: 95%;

  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.testContainer3 {
  display: flex;
  justify-content: center;
  width: 100%;
  transition: 0.4s;
}

.testContainer4 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 7px;
  margin-top: 7px;
  flex-grow: 1;
}

.testContainer5 {
  display: flex;
  width: 100%;
  height: 95%;
}
</style>
